<template>
  <div>
    <div v-if="currentValue && currentValue.attachmentId" style="margin-bottom: 10px;">
      <ul class="upload-img-list">
        <li>
          <div class="img-box-wrap">
            <i class="i-remove el-icon-circle-close" title="移除" @click="deleteItem(currentValue)"></i>
            <video :src="currentValue.url" controls="controls" width="120px" height="120px">
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </li>
      </ul>
    </div>
    <file-dialog ref="fileDialog" file-type="video" :allowed-extension="allowedExtension" :file-max-size="100" @save="getSelectedItem"></file-dialog>
    <el-button @click="open()">选择视频</el-button>
  </div>
</template>

<script>
import FileDialog from "@/components/ApeSelectors/file-dialog";

export default {
  name: "ApeVideoSingleSelector",
  components: {
    FileDialog
  },
  props: {
    attachmentId: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default: () => {
        return undefined;
      }
    }
  },
  data() {
    return {
      allowedExtension: [],
      currentValue: this.value
    };
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit("input", newValue);
      this.$emit("select");
    },
    // 从已选图片列表中删除某张图片
    deleteItem(item) {
      this.currentValue = undefined;
      this.updateValue(this.currentValue);
    },
    // 打开选择图片和上传图片的Dialog
    open() {
      this.$refs["fileDialog"].open();
    },
    getSelectedItem(selectedItem) {
      const item = selectedItem;
      item.display_order = 0;
      this.currentValue = item;
      this.updateValue(this.currentValue);
    }
  }
};
</script>
<style lang="scss">
.upload-img-list {
  overflow: hidden;
  &:before,
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  padding-top: 10px;
  margin-top: 0;
  li {
    position: relative;
    float: left;
    width: 120px;
    border: 1px solid #eee;
    & + li {
      margin-left: 10px;
    }
    img {
      vertical-align: middle;
      width: 100%;
      max-height: 100%;
    }
  }
  .img-box-wrap {
    position: relative;
    .i-remove {
      position: absolute;
      top: -12px;
      right: -12px;
      color: #f00;
      z-index: 1;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      cursor: pointer;
      font-size: 20px;
    }
    .set-first {
      position: absolute;
      bottom: 0;
      padding: 2px 5px;
      right: 0;
      left: 0;
      z-index: 1;
      background-color: #333333;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.6;
      i {
        margin-right: 5px;
      }
      a {
        display: block;
        color: #ffffff;
      }
    }
  }
  .set-num {
    line-height: normal;
    padding: 7px 10px 5px;
    overflow: hidden;
    i {
      cursor: pointer;
      vertical-align: top;
    }
    .pull-right {
      float: right;
    }
  }
}
</style>

